<!-- c-table -->
<template>
    <div class="c-table" :style="bgStyle">
        <div class="c-table-header">
            {{headTitle}}
            <div class="title-dec" :style="headerStyle"></div>
        </div> 
        <div class="c-table-content">
            <el-table
            class="my-ctable"
            :data="tableData"
            height="100%"
            border
            ref="catTb"
            style="width: 100%"
            :row-class-name="tableRowClassName"
            @row-click="handleClickTableRow"
            @selection-change="handleSelectionChange">

                <template v-if="headTitle == '归还组'">
                    <el-table-column
                    type="selection"
                    width="100">
                    </el-table-column>
                </template>

                <template 
                v-for="(para, index) in tableParas"
                >
                    <el-table-column
                    :key="index"
                    :label="para.label"
                    :prop="para.prop"
                    >
                        <template slot-scope="scope">
                            <template v-if="para.prop == 'inoutType'">
                                <span :class="getStateClass(scope.row.inoutType - 1)">{{['出库中', '已入库', '异常'][scope.row.inoutType - 1]}}</span>
                            </template>
                             <template v-else>
                                {{scope.row[para.prop]}}
                            </template>
                        </template>
                    </el-table-column>
                </template>

                <template v-if="showCompare">
                    <el-table-column
                    type="compare"
                    label="出入库对比"
                    align="center"
                    width="150">
                        <template slot-scope="scope">
                            <template v-if="scope.row.compare == 0">
                                <el-button 
                                type="success" 
                                icon="el-icon-check" 
                                circle>
                                </el-button>
                            </template>
                             <template v-else>
                                <el-button 
                                type="danger" 
                                icon="el-icon-close" 
                                circle>
                                </el-button>
                            </template>
                        </template>
                    </el-table-column>
                </template>
                
            </el-table>
        </div>   
    </div>
</template>

<script>

export default {
    name: 'c-table',
    data () {
        return {
           selectedDataId: null,
           multipleSelection: []
        }
    },
    props: {
        // 顶部表格
        headTitle: {
            type: String,
            default: '模板'
        },
        // 背景颜色
        bgColor: {
            type: String,
            default: '#202E45'
        },
        // 标题前边颜色
        headColor: {
            type: String,
            default: '#2683FF'
        },
        // 表格字段
        tableParas: {
            type: Array,
            default () {
                return [{
                    label: '工具名称',
                    prop: 'toolName'
                },{
                    label: '工具数量',
                    prop: 'toolName'
                }]
            }
        },
        // 数据
        tableData: {
            type: Array,
            default () {
                return []
            }
        },
        // 比较
        compare: {
            type: Array,
            default () {
                return []
            }
        },
        // 是否显示不同之处
        showCompare: {
            type: Boolean,
            default: false
        }
        
    },
    computed: {
        // 背景颜色
        bgStyle () {
            return {
                background: this.bgColor
            }
        },
        // 头部颜色
        headerStyle () {
            return {
                background: this.headColor
            }
        }
    },
    methods: {
        handleClickTableRow (rows) {
            this.$refs.catTb.toggleRowSelection(rows);
        },
        handleSelectionChange (val) {
            this.selectedDataId = val.length != 0 ? val[0].id : null;
            let tem = val.length != 0 ? val[0].jobTypeName : null;
            sessionStorage.setItem('dataId', this.selectedDataId);
            sessionStorage.setItem('tem', tem);
            if (val.length > 1) {
                this.$refs.catTb.clearSelection();
                this.$refs.catTb.toggleRowSelection(val.pop());
            }
        },
        // 显示不同支出的样式
        tableRowClassName({row, rowIndex}) {
            if (this.compare.length != 0 && this.compare.includes(rowIndex)) {
                    return 'dif'
            } else if (this.compare.length != 0 && !this.compare.includes(rowIndex)) {
                    return 'has'
            }
            return '';
        },

        // 不同状态不同颜色
        getStateClass (inoutType) {
            let className;
            if (inoutType == 0) {
                className = 'outing'
            } else if (inoutType == 1) {
                className = 'in-stored'
            } else if (inoutType == 2) {
                className = 'in-error'
            }
            return className;
        }
    },
    created () {
        /*
        if (sessionStorage.getItem('dataId')) {
            this.selectedDataId = sessionStorage.getItem('dataId');
        }
        */
    }
}
</script>
<style lang='scss'>
.c-table {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #43587A;
    overflow: hidden;

    &-header {
        width: 100%;
        height: 90px;
        padding-left: 70px;
        box-sizing: border-box;
        line-height: 90px;
        font-size: 36px;
        color: #FFFFFF;
        letter-spacing: 0;
        font-weight: 600;
        position: relative;

        .title-dec {
            content: '';
            position: absolute;
            width: 8px;
            height: 38px;
            top: 26px;
            left: 33px;
        }
    }

    &-content {
        height: calc(100% - 90px);

        .el-checkbox__inner {
            width: 24px;
            height: 24px;
            border: 2px solid #2683FF;
            border-radius: 4px;
        }

        .el-checkbox__inner::after {
            width: 8px;
            height: 12px;
            left: 6px;
        }

        .el-button.is-circle {
            padding: 5px;
        }

        .my-ctable {
            .outing {
                color: #2683ff;
            }

            .in-stored {
                color: #2ed3c0;
            }

            .in-error {
                color: #ff802f;
            }
        }
    }

    .dif {
        td {
            .cell {
                color: #FF802F!important;
            }
        }
        
    }

    .has {
        td {
            .cell {
                color: green!important;
            }
        }
        
    }
}


</style>